<template>
  <div class="one">
    <div v-for="vm in data" :key="vm">
      <Card :src="vm.src" :title="vm.title" :time="vm.time" />
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import Card from "../../components/card/cardLet.vue";
import img1 from "../../assets/l2.webp";
import img2 from "../../assets/l3.webp";
import img3 from "../../assets/l4.webp";
export default {
  components: {
    Card,
  },
  setup() {
    var data = reactive([
      {
        src: img1,
        title: "电影慢镜头混剪[浪客剑心(1)]",
        time: "混剪/04'20",
      },
      {
        src: img2,
        title: "电影慢镜头混剪[浪客剑心(2)]",
        time: "混剪/02'36",
      },
      {
        src: img3,
        title: "电影慢镜头混剪[浪客剑心(3)]",
        time: "混剪/03'45",
      },
    ]);
    return { data };
  },
};
</script>

<style>
.one {
  cursor: pointer;
  margin: 0 auto;
  height: auto;
  max-width: 601px;
}

.style {
  text-align: center;
  line-height: 60px;
  width: 270px;
  height: 100%;
  color: gray;
  background-color: black;
  border: 1px solid #fff;
}
Card {
  width: 100%;
}
</style>